<script>
import VideoAPI from "@/api/qiqq/video.js";
import { useUserStore } from "@/store/index.ts";
import FollowAPI from "@/api/follow.ts";

export default {
  name: "VideoDetail",
  // eslint-disable-next-line vue/no-unused-components
  //components: { CommonHeader },
  // eslint-disable-next-line vue/no-unused-components
  data() {
    return {
      videoDetail: {
        title: "title",
        createTime: "",
      },
      viewCount: "",
      danmuCount: 0,
      videoUpInfo: {},
      player: null,
      onWatching: 0,
      danmuText: "",
      liked: false,
      likeCount: 0,
      hasCoin: false,
      coinCount: 0,
      collected: false,
      collectCount: 0,
      followed: false,
      showLoginDialog: false,
      defaultDanmuConfig: {
        duration: 5000, //弹幕持续显示时间，单位是毫秒（最低为5000毫秒）
        style: {
          color: "#ffffff",
          padding: "5px 11px",
        },
      },
      ws: null,
      activeNames: ["1"],
      tableData: [],
      danmus: [],
      followUpParam: {
        userId: "",
        followId: "",
        createTime: "",
      },
    };
  },

  mounted() {
    this.getVideoDetail();
  },
  methods: {
    getVideoDetail() {
      // const videoId = this.$route.query.videoId;
      //暂定vid为1
      const vid = 1;
      let uid = 1;
      if (vid == 1) {
        VideoAPI.getVideoDetail(vid).then((response) => {
          console.log(response);
          this.videoDetail.title = response.title;
          this.videoDetail.createTime = response.uploadDate;
          uid = response.uid;
        });
        VideoAPI.getVideoStatus(vid).then((videoStatusRes) => {
          console.log(videoStatusRes);
          this.viewCount = videoStatusRes.play;
          this.danmuCount = videoStatusRes.danmu;
        });

        VideoAPI.getUserInfo(uid).then((userInfoRes) => {
          console.log(userInfoRes);
          this.videoUpInfo.avatar = userInfoRes.avatar;
          this.videoUpInfo.nick = userInfoRes.nickname;
          this.videoUpInfo.userId = userInfoRes.id;
        });

        //获取当前用户对视频Up的关注情况
        const getPageParams = {
          pageSize: 10,
          pageNo: 1,
        };
        FollowAPI.getPage(getPageParams).then((response) => {
          this.followed = response.list.length == 0 ? false : true;
        });
      }
    },
    /**
     * 关注Up主
     */
    addUserFollowings(upId) {
      const userStore = useUserStore();
      const uidCon = userStore.user.userId;
      const params = {
        userId: uidCon,
        followId: upId,
      };
      FollowAPI.followUser(params);
    },
  },
};
</script>

<template>
  <div class="video-detail-container">
    <div class="left-container">
      <div class="video-info-container">
        <div class="video-info-title">
          {{ videoDetail.title }}
        </div>
        <div class="video-info-count">
          <span>
            <img src="./viewCount.png" alt="" />
            {{ viewCount }}
          </span>
          <span>
            <img src="./danmuCount.png" alt="" />
            {{ danmuCount }}
          </span>
          <span>
            {{ videoDetail.createTime }}
          </span>
          <span>
            <img src="./jinzhi.png" alt="" />
            未经作者授权，禁止转载
          </span>
        </div>
      </div>
    </div>
    <div class="right-container">
      <!--        视频投稿的up主信息-->
      <div class="up-info-container">
        <div class="up-avatar">
          <img :src="videoUpInfo.avatar" alt="" />
        </div>
        <div class="up-info-right">
          <div class="up-info-detail">
            {{ videoUpInfo.nick }}
          </div>
        </div>
        <div class="up-operation">
          <el-button
            type="primary"
            v-if="!followed"
            @click="addUserFollowings(videoUpInfo.userId)"
          >
            关注
          </el-button>
          <el-button type="primary" v-else disabled>已关注</el-button>
          <el-dialog
            title="密码登录"
            v-model:visible="showLoginDialog"
            width="30%"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.video-detail-container {
  display: flex;
  justify-content: center;

  .left-container {
    display: flex;
    flex-direction: column;

    .video-info-container {
      display: flex;
      height: 108px;
      flex-direction: column;
      justify-content: center;

      .video-info-title {
        font-size: 24px;
        margin-bottom: 5px;
      }
      .video-info-count {
        font-size: 13px;
        align-items: center;
        color: gray;
        display: flex;
        span {
          display: flex;
          align-items: center;
          margin-right: 20px;
          img {
            height: 25px;
            width: 25px;
            border-radius: 2px;
            margin-right: 5px;
          }
        }
      }
    }

    .danmu-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #d5d2d2;
      border-radius: 2px;

      .danmu-bar-video-info {
        width: 100%;
      }

      .danmu-bar-operation {
        display: flex;
        height: 40px;
        width: 100%;
        border-radius: 8px;
        background: #f4f4f4;

        .danmu-bar-sender {
          display: flex;
          width: 100%;
          align-items: center;
          border: none;
          border-radius: 8px 0 0 8px;
          height: 100%;

          .danmu-bar-sender-input {
            outline: none;
            background: none;
            border: 0;
            color: #212121;
            height: 28px;
            line-height: 28px;
            min-width: 100px;
            padding: 0 5px;
            width: 100%;
          }
        }
      }
    }

    .video-tools-bar {
      margin-top: 10px;
      display: flex;
      border-bottom: 1px solid #d5d2d2;
      .video-tools-bar-left {
        width: 100%;
        display: flex;
        margin-bottom: 10px;
        .like-coin-collect {
          display: flex;
          align-items: center;
          margin-right: 40px;
          img {
            height: 36px;
            width: 36px;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
    }

    .left-container-under-player {
      .video-detail-description {
        max-width: 800px;
        margin: 18px 0;
      }
    }
  }

  .right-container {
    margin-left: 30px;
    display: flex;
    flex-direction: column;

    .up-info-container {
      display: flex;
      align-items: center;
      height: 108px;
      .up-avatar {
        img {
          width: 60px;
          height: 60px;
          border-radius: 5px;
        }
      }
      .up-info-right {
        padding: 20px;
        .up-info-detail {
          color: #fb7299;
        }
      }
    }

    .danmu-box {
      width: 500px;
    }
  }
}
</style>
